<template>
    <div style="margin: 0 17.8%">
        <!-- 个人信息 -->
        <div class="PersonTop">
            <div class="PersonTop_img">
                <img v-image-preview :src="avatar"/>
            </div>
            <div class="PersonTop_text">
                <div class="user_text">
                    <div class="user_name">
                        <span> {{ nickname }} </span>
                    </div>
                    <div class="user-v" v-if="v === 3">
                        <img src="@/assets/image/sculpture/enjoy.jpeg" class="user-v-img"/>
                        <span class="user-v-font">优质媒体作者</span>
                    </div>
                    <div class="user_qianming">
                        <span> {{ design }}</span>
                    </div>
                    <div class="user_anniu">
                        <el-button
                             class="el-icon-edit"
                             v-if="this.$route.params.id === this.$store.state.id"
                             type="primary"
                             size="medium"
                             plain
                             @click="edit"
                        >编辑
                        </el-button
                        >
                        <el-button
                             v-else
                             @click="follow"
                             type="primary"
                             size="medium"
                             icon="el-icon-check"
                             v-text="
                isfollowid.indexOf(this.$route.params.id) > -1
                  ? '已关注'
                  : '关注'
              "
                        ></el-button>
                    </div>
                </div>
                <div class="user_num">
                    <div style="cursor: pointer" @click="myfan">
                        <div class="num_number">{{ fanCounts }}</div>
                        <span class="num_text">粉丝</span>
                    </div>
                    <div style="cursor: pointer" @click="myfollow">
                        <div class="num_number">{{ followCounts }}</div>
                        <span class="num_text">关注</span>
                    </div>
                    <div>
                        <div class="num_number">{{ goodCounts }}</div>
                        <span class="num_text">获赞</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 个人信息导航 -->
        <div class="person_body">
            <div class="person_body_left">
                <el-card class="box-card" :body-style="{ padding: '0px' }">
                    <div slot="header" class="clearfix">
                        <span class="person_body_list" style="border-bottom: none">个人中心</span>
                    </div>
                    
                    <el-menu
                         router
                         active-text-color="#00c3ff"
                         class="el-menu-vertical-demo"
                    >
                        <el-menu-item
                             index="info"
                             :route="{ name: 'PersonalInfo', params: $route.params.id }"
                        >
                            <i class="el-icon-user"></i>
                            <span slot="title">个人简介</span>
                        </el-menu-item>
                        <el-menu-item
                             index="myarticle"
                             :route="{ name: 'PersonalInfo', params: $route.params.id }"
                        >
                            <i class="el-icon-edit-outline"></i>
                            <span slot="title">发帖</span>
                        </el-menu-item>
                        <el-menu-item
                             index="mycollect"
                             :route="{ name: 'PersonalInfo', params: $route.params.id }"
                        >
                            <i class="el-icon-document"></i>
                            <span slot="title">收藏</span>
                        </el-menu-item>
                        <el-menu-item
                             index="myfan"
                             :route="{ name: 'PersonalInfo', params: $route.params.id }"
                        >
                            <i class="el-icon-tableware"></i>
                            <span slot="title">粉丝</span>
                        </el-menu-item>
                        <el-menu-item
                             index="myfollow"
                             :route="{ name: 'PersonalInfo', params: $route.params.id }"
                        >
                            <i class="el-icon-circle-plus-outline"></i>
                            <span slot="title">关注</span>
                        </el-menu-item>
                    </el-menu>
                </el-card>
            </div>
            <div class="person_body_right">
                <router-view></router-view>
            </div>
        </div>
        
        <!-- 用户信息修改弹窗 -->
        <el-dialog
             title="修改个人信息"
             :visible.sync="dialogVisible"
             width="50%"
             :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <div class="updateinfo">
                    <div class="left">
                        <el-form-item label="头像" prop="avatar">
                            <img style="width:200px;height:150px" :src="form.avatar"></img>
                        </el-form-item>
                        <el-form-item label="账号密码" prop="password">
                            <el-input v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="form.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-switch
                                 v-model="form.sex"
                                 active-color="#13ce66"
                                 inactive-color="#ff4949"
                                 active-text="男"
                                 inactive-text="女"
                                 :active-value="1"
                                 :inactive-value="0"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                    
                    </div>
                    <div class="right">
                        <el-form-item label="用户编号" prop="id">
                            <el-input v-model="form.id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="账号" prop="account">
                            <el-input v-model="form.account" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="地区" prop="area">
                            <el-input v-model="form.area"></el-input>
                        </el-form-item>
                        <el-form-item label="兴趣爱好" prop="hobby">
                            <el-input v-model="form.hobby"></el-input>
                        </el-form-item>
                        <el-form-item label="职业" prop="work">
                            <el-input v-model="form.work"></el-input>
                        </el-form-item>
                        <el-form-item label="个性签名" prop="design">
                            <el-input v-model="form.design"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="mobilePhoneNumber">
                            <el-input v-model="form.mobilePhoneNumber"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submit">提 交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "Personal",
    des: "个人中心",
    data() {
        return {
            avatar: require('@/assets/image/sculpture/enjoy1.jpeg'),
            nickname: "Enjoy",
            v: 1,
            design: "",
            followCounts: "1532",
            fanCounts: "10w",
            goodCounts: "123w",
            isfollow: true,
            followData: {
                fanId: "",
                followId: "",
            },
            isfollowid: [],
            
            // 用户数据处理
            dialogVisible: false,
            form: {
                avatar: require('@/assets/image/sculpture/enjoy.jpeg'),
                password: "",
                nickname: "",
                email: "",
                mobilePhoneNumber: "",
                sex: '男',
                id: "0EF5825A-3E21-F686-60D0-EC072C4C4950",
                account: "3ABF-F8F9E095D777-Enjoy",
                area: "",
                hobby: "",
                work: "",
                design: "",
            },
            rules: {
                nickname: [
                    {required: true, message: "昵称不能为空", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "账号密码不能为空", trigger: "blur"},
                ],
            },
        };
    },
    mounted() {
        this.load();
    },
    watch: {},
    methods: {
        load() {
        
        },
        myfan() {
            this.$router.push({
                path: `/newsuser/personal/myfan/${this.$route.params.id}`,
            });
        },
        myfollow() {
            this.$router.push({
                path: `/newsuser/personal/myfollow/${this.$route.params.id}`,
            });
        },
        follow() {
            if (!this.$store.state.id) {
                this.$message({
                    showClose: true,
                    message: "请登录后再进行操作哦",
                    type: "warning",
                });
            } else {
                this.followData.followId = this.$route.params.id;
                this.followData.fanId = this.$store.state.id;
                if (this.isfollowid.indexOf(this.followData.followId) > -1) {
                    this.isfollow = true;
                } else {
                    this.isfollow = false;
                }
            }
        },
        edit() {
            this.dialogVisible = true;
        },
        submit() {
        
        },
        handleClose() {
            this.dialogVisible = false;
            this.$emit("flesh");
        },
    },
};
</script>

<style scoped>
.me-video-player {
    background-color: transparent;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    position: fixed;
    left: 0;
    z-index: 0;
    top: 0;
}


.PersonTop {
    padding-top: 20px;
    background-color: white;
    height: 140px;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
}

.PersonTop_img {
    width: 130px;
    height: 130px;
    /*background-color: #8c939d;*/
    margin-right: 24px;
    margin-left: 20px;
    overflow: hidden;
    border-radius: 64px;
}

.PersonTop_img img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.PersonTop_text {
    height: 120px;
    width: 1030px;
    display: flex;
}

.user_text {
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: left;
    margin: 0 2%;
}

.user_name {
    font-weight: bold;
}

.user-v {
    margin-bottom: -5px;
}

.user-v-img {
    width: 15px;
    height: 15px;
}

.user-v-font {
    font-size: 15px;
    color: #00c3ff;
}

.user_qianming {
    font-size: 14px;
    color: #999;
}

.user_num {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
}

.user_num > div {
    text-align: center;
    border-right: 1px dotted #999;
    box-sizing: border-box;
    width: 80px;
    height: 40px;
    line-height: 20px;
}

.num_text {
    color: #168f0f;
}

.num_number {
    font-size: 20px;
    color: #d52a2a;
    margin: 0 5px 10px 2px;
}

.el-menu-item > span {
    font-size: 16px;
    color: #999;
}

/*下面部分样式*/
.person_body-1 {
    width: 1226px;
    margin-top: 210px;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
}

.person_body {
    margin-top: 20px;
    display: flex;
    /*transform: translateX(-50%);*/
    border-radius: 5px;
}

.person_body_left {
    width: 25%;
    height: 502px;
    border-radius: 1px;
    margin-right: 2%;
    text-align: center;
}

.person_body_list {
    width: 100%;
    height: 50px;
    margin-top: 25px;
    font-size: 22px;
    border-bottom: 1px solid #f0f0f0;
    background-image: -webkit-linear-gradient(
         left,
         rgb(42, 134, 141),
         #e9e625dc 20%,
         #3498db 40%,
         #e74c3c 60%,
         #09ff009a 80%,
         rgba(82, 196, 204, 0.281) 100%
    );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
}

.el-menu-item {
    margin-top: 22px;
}

.person_body_right {
    width: 80%;
    border-radius: 3px;
    background-color: white;
}

.box-card {
    height: 500px;
}

/*ui样式*/
.el-button {
    width: 84px;
}

.el-menu {
    border-right: 0;
}

/* 用户修改界面 */
.updateinfo {
    height: 435px;
    overflow: auto;
}

.left {
    /* width: 330px; */
    float: left;
}

.right {
    overflow: hidden;
    width: 55%;
}

</style>
